import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
import DataSet from '@antv/data-set';


const colorMap = {
  雨水管点: '#1890ff',
  污水管点: '#13c2c2',
  污水管线: '#ffc53d',
  雨水管线: '#73d13d',
};


@Component({
  selector: 'app-g2-twolevelpie',
  templateUrl: './g2-twolevelpie.component.html',
  styleUrls: ['./g2-twolevelpie.component.scss']
})
export class G2TwolevelpieComponent implements OnInit, OnChanges {

  @Input() piedata = null; 
  id = uuidv4();
  charts = null;
  constructor() { }

  ngOnInit() {
  }

  configureChart(chart) {
    if (this.charts) {
      this.charts.destory();
    }
    this.charts = chart;
    // 内部数据按照百分比划分
    const ds = new DataSet();
    const dv = ds.createView();
    dv.source(this.piedata).transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent',
    });

    chart.data(dv.rows);
    chart.legend(false);
    chart.coordinate('theta', {
      radius: 0.5,
      innerRadius: 0.3,
    });
    chart.tooltip({
      showMarkers: false
    });
    // 内部完成
    chart
      .interval()
      .adjust('stack')
      .position('percent')
      .color('type', (val) => colorMap[val])
      .style({
        stroke: 'white',
        lineWidth: 1,
      })
      .label('type', {
        offset: -5,
        style: {
          fill: 'white',
          shadowBlur: 2,
          shadowColor: 'rgba(0, 0, 0, .45)',
        },
      });
    // ----------------------外圈（外圈百分比有问题！）-------------------------

    const ds2 = new DataSet();
    const dv2 = ds2.createView();
    dv2.source(this.piedata).transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent',
    });
    const outterView = chart.createView();
    outterView.data(dv2.rows);
    outterView.coordinate('theta', {
      innerRadius: 0.5 / 0.8,
      radius: 0.8,
    });
    outterView
      .interval()
      .adjust('stack')
      .position('value')
      .color('type*name', (type, name) => colorMap[type])
      .style({
        stroke: 'white',
        lineWidth: 1,
      })
      .label('name', {
        offset: -10,
        style: {
          fill: 'white',
          shadowBlur: 2,
          shadowColor: 'rgba(0, 0, 0, .45)',
        },
      });



    this.charts.interaction('element-active');

    this.charts.render();
  }

  ngOnChanges() {
    if (this.charts){
      this.charts.changeData(this.piedata);
      this.charts.render();
    }
  }

}
